import { ref, onMounted, defineProps } from 'vue';
import axios from 'axios'
import router from '@/router'
import { getCategoryList, getGoodsList, addCart } from '../api/api'
import { showToast } from 'vant';


// 定义一个全局变量 点击显示弹出层子组件
const show = ref(false);


// GoodsList组件中的菜单栏逻辑
export function useSelectGoods() {
    // 侧边导航栏项目索引
    const activeIndex = ref(0);
    const items = ref([{ text: '人气top', id: 1 }, { text: '大师咖啡', id: 1 }, { text: '拿铁', id: 2 }, { text: '瑞纳冰', id: 3 }, { text: '经典饮品', id: 4 }, { text: '健康轻食', id: 5 }, { text: '大师咖啡', id: 6 }])

    // 商品列表数据  给个初始值
    const goodsList = ref([
        { picture: '/img/goodspic.png', price: '27' },
        { picture: 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg', price: '67' }])

    // 封装一个渲染初始化函数
    const initGoodsList = async (skuId) => {
        try {
            let { data } = await getGoodsList(skuId)
            // console.log(data);
            goodsList.value = data
            // console.log(goodsList.value);

        } catch (error) {
            console.error(error)
        }
    }


    onMounted(async () => {
        // 先获取到分类列表
        let categoryList = await getCategoryList()
        items.value = categoryList.data
        // 渲染右边商品列表
        initGoodsList({ skuId: 'A' })


    })


    // 点击显示弹出层子组件
    // const show = ref(false);
    // 定义变量 表示点中的商品对应的价格 并传到子组件
    const popPrice = ref('')
    const popGoods = ref('')
    const popConfig = ref('')
    const popProId = ref('')
    const showPopup = (price, goods, config, proId) => {
        show.value = true;
        // 把传进来的价格渲染到弹出层
        popPrice.value = price
        popGoods.value = goods
        popConfig.value = config
        // console.log(price,goods,proId);
        popProId.value = proId
    }


    const clickNav = (index) => {
        // console.log(items.value[index].skuId);
        initGoodsList({ skuId: items.value[index].skuId })
    }

    return {
        activeIndex, items, goodsList, show, popPrice, popGoods, popConfig, popProId, showPopup, clickNav
    }
}

// GoodsList组件中的弹出层逻辑
export function usePopup() {
    // 获取父组件传过来的数据————点击的商品对应的价格
    const props = defineProps(['popPrice', 'popGoods', 'popConfig', 'popProId'])


    //模拟数据：
    const popupArr = ref([
        { name: '温度', children: ['热', '冰', '温'], row: 0 },
        { name: '奶', children: ['无奶', '单份奶', '双份奶'], row: 0 },
        { name: '糖', children: ['无糖', '单份糖', '双份糖'], row: 0 }
    ])

    //弹出层的商品配置（香菜+榛子）
    const herb = ref(false)
    const hazel = ref(false)
    //底部显示的配置信息  设置默认值
    const addArr = ref(['热', '无奶', '无糖'])
    // 获取点击的咖啡配置信息
    const getType = (e) => {
        popupArr.value.forEach((item, index) => {
            if (item.children.includes(e.target.innerText)) addArr.value[index] = e.target.innerText
        })
    }

    // 步进器
    const stepperNum = ref(1)

    // 定义一个数组  将选择好的咖啡配置传到购物车页面
    const configArr = ref('')
    // 调用获取popProId数据


    const toCart = async (proId) => {
        configArr.value = addArr.value.join('+')

        // 发起加入购物车请求
        let { msg, status } = await addCart({ proId, uId: 11, goods_num: stepperNum.value })
        if (status == 200) {
            showToast(msg);
            show.value = false
        } else {
            showToast('失败，请重试');
        }


    }


    //收藏提示框
    const colSucess = () => {
        showToast({
            message: '收藏成功',
            icon: 'like-o',
        });
    }

    //弹出层底部
    const active = ref(0);


    return {  // toCart
        props, popupArr, herb, hazel, addArr, getType, configArr, toCart, stepperNum, colSucess, active
    }
}